<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>note-code</title>
    <!-- <style>
      #divID {
        color: black;
      }
      .box {
        color: black;
      }
      div {
        color: yellow;
      }
      /*第一种写法，权重值：(0,2,3)*/
      div.box ul.list li {
        color: ☐red;
      }
      /*第二种写法，权重值：(0,1,3)*/
      div.box > ul > li {
        color: □blue;
      }
      /*第三种写法，权重值：(0,2,2)*/
      .box ul[a='hello'] > li {
        color: □green;
      }
    </style> -->

    <style>
      a {
        color: darkred;
        /* color: darkred !important; */
      }

      .link {
        color: darkgreen;
      }
      .link.link2 {
        color: darkorange;
      }

      #boxID a {
        color: darkblue;
      }
      #boxID #listID a {
        color: darkorchid;
      }
    </style>
  </head>

  <body>
    <div id="boxID" class="box">
      <ul id="listID" class="list">
        <li>
          <a class="link" href="#HTML">HTML</a>
        </li>
        <li>
          <a class="link" href="#CSS">CSS</a>
        </li>
        <li>
          <a style="color: skyblue" class="link link2" href="#JAVASCRIPt"
            >JAVASCRIPt</a
          >
        </li>
      </ul>
    </div>
  </body>
</html>
